<template>
  <div>
    <div class="icon-warpper">
      <svg-icon
        :icon-class="'arrowleft'"
        :class="isOut==true?'out':'in'"
        @click="clickIcon"
        style="cursor:pointer;overflow:hidden"
      ></svg-icon>
    </div>
    <el-tree
      :data="treeDate"
      :class="isOut==true?'showTree':'hiddenTree'"
      :props="defaultProps"
      highlight-current
      @node-click="handleNodeClick"
      :default-expand-all="true"
      :icon-class="'el-icon-circle-plus-outline'"
    ></el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      treeDate: [
        {
          label: "我的检查",
          id: "0",
          children: [
            {
              label: "我的检查项",
              id: "1",
              children: [
                {
                  label: "缺陷登记",
                  id: "bugCheck",
                  children: [],
                },
                {
                  label: "缺陷描述",
                  id: "bugDescribeCheck",
                  children: [],
                },
              ],
            },
          ],
        },
      ],
      defaultProps:{
          children:'children',
          label:'label'
      },
      isOut:true
    };
  },
  methods:{
      handleNodeClick(item){
          this.$emit('treeClick',item)
      },
      clickIcon(){
          this.isOut=!this.isOut
          this.$emit('isOut',this.isOut)
      }
  }
};
</script>
<style lang="scss" scoped>
.icon-warpper{
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    .out{
        width: 1.5em;
        height: 1.5em;
    }
    .in{
        width: 1.5em;
        height: 1.5em;
        -webkit-transform:rotate(180deg) ;
        transform: rotate(180deg);
    }
}
.showTree{
    visibility: visible;
}
.hiddenTree{
    visibility: hidden;
}
</style>